<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>显示过滤或排序的副本数组</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>

    <div id="app_for">
        显示原始数组
        <ul>
            <li v-for="number in numbers">
                {{number}}
            </li>
        </ul>
        显示过滤数组(利用计算属性)：
        <ul>
            <li v-for="number in filterNumbers">
                {{number}}
            </li>
        </ul>
        显示排序数组（利用普通方法）：
        <ul>
            <li v-for="number in even(numbers)">
                {{number}}
            </li>
        </ul>

    </div>

    <script>
        var app_for = new Vue({
            el:'#app_for',

            data:{
                numbers:[1,2,3,4,5,6,7,8,9],
            },
            methods:{
                even: function (numbers) {
                    return numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            },
            computed:{
                filterNumbers:function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0;
//                        return number >5 ;
                    })
                }
            },
      })

    </script>
</body>
</html>